<template>
  <div class="home">
    <div class="slider">
      <div class="nav-item">Logo</div>
      <div :class="{ choose: chooseItem === index }"
           class="nav-item"
           v-for="(item, index) in $t('navList')"
           :key="index"
           @click="change(index)">
        {{ item }}
      </div>
    </div>
    <div class="main">
      <div class="head">
        <span class="theme"
              @click="changeTheme">
          {{ $t('theme[' + (theme === 'light' ? 1 : 0) + ']') }}
        </span>
        <span class="language"
              @click="changeLanguage">{{
          $t('language.name')
        }}</span>
      </div>
      <div class="main-body">
        <div class="body">
          <router-view></router-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import { Test } from '../services/index'
export default {
  name: 'home',
  data () {
    return {
      theme: sessionStorage.theme || 'light', //主题
      chooseItem: Number(sessionStorage.chooseItem) || 0 //选中的导航项
    }
  },
  created () {
    // Test.get().then((res) => {
    //   console.log(res)
    // })
  },
  methods: {
    //切换导航
    change (val) {
      this.chooseItem = val
      sessionStorage.chooseItem = val
      switch (val) {
        case 0:
          this.$router.push({ name: 'button' })
          break
        case 1:
          this.$router.push({ name: 'rotationchart' })
          break
        case 2:
          this.$router.push({ name: 'form' })
          break
        case 3:
          this.$router.push({ name: 'other' })
          break
        case 4:
          this.$router.push({ name: 'editor' })
          break
        case 5:
          this.$router.push({ name: 'vueEditor' })
          break
        case 6:
          this.$router.push({ name: 'test' })
          break
      }
    },
    //切换主题
    changeTheme () {
      this.theme = this.theme === 'light' ? 'dark' : 'light'
      sessionStorage.theme = this.theme
      this.$initTheme(this.theme, sessionStorage.daynight === 'true')
    },
    //切换语言
    changeLanguage () {
      this.$i18n.locale == 'zh'
        ? (this.$i18n.locale = 'en')
        : (this.$i18n.locale = 'zh') //设置中英文模式
      sessionStorage.languageSet = this.$i18n.locale //将用户设置存储到localStorage以便用户下次打开时使用此设置
    }
  }
}
</script>
<style lang="less" scoped>
@media screen and(max-width:770px) {
  .slider {
    overflow: hidden;
    width: 0 !important;
    .choose {
      width: 100% !important;
    }
  }
  .main {
    margin-left: 0 !important;
  }
}
.home {
  height: 100%;
  width: 100%;
  .slider,
  .main {
    height: 100%;
    box-sizing: border-box;
    transition: all 0.2s;
    box-shadow: inset -10px 0px 40px -5px #888888;
  }
  .slider {
    float: left;
    width: 200px;
    background: var(--nav-color);
    user-select: none;
    .nav-item {
      cursor: pointer;
      width: 100%;
      height: 50px;
      text-align: center;
      line-height: 50px;
      box-shadow: inset -10px 0px 20px -10px #888888;
      background: var(--nav-color);
      transition: all 0.2s;
      color: var(--text);
    }
    .choose {
      width: 105%;
    }
  }
  .main {
    margin-left: 200px;
    .head {
      position: relative;
      height: 50px;
      box-shadow: inset 0px -10px 20px -10px #888888;
      user-select: none;
      background: var(--tab-color);
      .theme {
        position: absolute;
        right: 0;
        cursor: pointer;
        top: 50%;
        right: 90px;
        transform: translateY(-50%);
      }
      .language {
        position: absolute;
        cursor: pointer;
        right: 20px;
        top: 50%;
        transform: translateY(-50%);
      }
      color: var(--text);
    }
    .main-body {
      width: 100%;
      height: calc(100% - 50px);
      box-sizing: border-box;
      padding: 25px;
      background: var(--background);
      .body {
        user-select: none;
        height: 100%;
        width: 100%;
        border-radius: 10px;
        background: var(--title-bk);
        padding: 20px;
        overflow: overlay;
        min-height: 500px;
      }
    }
  }
}
</style>
